import { PackageManagerTabs } from '@theme';

# Getting Started

## How to Use?

### Use via Package Import

Official form materials can be used directly through package import:

<PackageManagerTabs command="install @flowgram.ai/form-materials" />

```tsx
import { JsonSchemaEditor } from '@flowgram.ai/form-materials'
```


### Add Material Source Code via CLI


If your business has customization requirements for components (e.g., changing text, styles, business logic), it is recommended to **add material source code to the project via CLI for customization**:

```bash
npx @flowgram.ai/cli@latest materials
```

After running, the CLI will prompt the user to select materials to add to the project:

```console
? Select one material to add: (Use arrow keys)
❯ components/json-schema-editor
  components/type-selector
  components/variable-selector
```

Users can also directly add source code for specified materials via CLI:

```bash
npx @flowgram.ai/cli@latest materials components/json-schema-editor
```

After the CLI runs successfully, the relevant materials will be automatically added to the `src/form-materials` directory under the current project.

:::warning Notes

1. Official materials are currently implemented based on [Semi Design](https://semi.design/). If your business has underlying component library requirements, you can replace them by copying the source code via CLI
2. Some materials depend on third-party npm libraries, which will be automatically installed when the CLI runs
3. Some materials depend on other official materials, and the source code of these dependent materials will be added to the project together when the CLI runs

:::
